<template>
    <div class="container">
      <div class="title">添加花型</div>
      <div class="wrap">
        <el-row>
          <el-col :lg="16" :md="20" :sm="24" :xs="24">
            <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
            <el-form-item label="中文名称" prop="title">
                <el-input size="medium" v-model="form.title" placeholder="请填写中文名称"></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="name">
                <el-input size="medium" v-model="form.name" placeholder="请填写英文名称"></el-input>
            </el-form-item>
              <el-form-item label="主图" prop="image">
                <upload-imgs ref="uploadEle" :max-num="maxNum" :value="initData" />
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input size="medium" v-model="form.description" type="textarea" :rows="4" placeholder="请填写描述">
                </el-input>
              </el-form-item>
              <el-form-item class="submit">
                <el-button
                  type="primary"
                  v-permission="{ permission: '添加花型', type: 'disabled' }"
                  @click="submitForm('form')"
                  >保 存</el-button
                >
                <el-button @click="resetForm('form')">重 置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  import FlowerModel from '@/model/flower'
  import UploadImgs from '@/component/base/upload-image'
  
  export default {
    components: { UploadImgs },
    data() {
      return {
        form: {
          name: '',
          title: '',
          description: '',
          image: '',
          video: '',
        },
        initData: [],
        maxNum: 9,
      }
    },
    methods: {
      async getValue() {
        const val = await this.$refs.uploadEle.getValue()
        console.log(val)
        if (val && val.length > 0) {
          this.form.image = val[0].display
        }
      },
      async submitForm(formName) {
        await this.getValue()
        const form = { ...this.form }
        const res = await FlowerModel.create(form)
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.resetForm(formName)
          this.$confirm('是否跳转到花型列表页？', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'info',
          }).then(async () => {
            this.$router.push({ path: '/flower/list' })
          })
        }
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
      text-indent: 40px;
      border-bottom: 1px solid #dae1ec;
    }
  
    .wrap {
      padding: 20px;
    }
  
    .submit {
      float: left;
    }
  }
  </style>
  